<template>
	<div class="warpper-box">
		<a-row :gutter="24">
			<a-col :span="6">
				<a-card :bordered="true" title="组织部门" :style="{ height: '100%' }">
					<label slot="extra">
						<a-icon @click="queryAll" class="link-icon" style="margin-right:30px;" type="search"></a-icon>
						<a-icon @click="$refs.createDepartment.add(true)" class="link-icon" type="plus-circle" />
					</label>
					<a-tree :autoExpandParent="false" :replace-fields="orgFields" @select="orgChange" :tree-data="orgData">
					</a-tree>
					<a-empty v-show="orgData.length ===0" />
				</a-card>
			</a-col>
			<a-col :span="18">
				<s-table row-key="id" showPagination="auto" ref="table" showQuickJumper size="default" :columns="columns"
					:data="loadData">
					<span slot="description" slot-scope="text, record">
						<a-popover title="部门名称" trigger="hover">
							<template #content>
								<p style="margin: 0;">{{text}}</p>
							</template>
							<a-button style="padding: 0;color:#000" type="link">{{record.description | filterMore(7)}}</a-button>
						</a-popover>
					</span>
					<span slot="name" slot-scope="text, record">
						<a-popover title="部门描述" trigger="hover">
							<template #content>
								<p style="margin: 0;">{{text}}</p>
							</template>
							<a-button style="padding: 0;color:#000" type="link">{{record.name | filterMore(7)}}</a-button>
						</a-popover>
					</span>
					<span slot="managerNames" slot-scope="text, record">
						<a-popover title="负责人员" trigger="hover">
							<template #content>
								<p style="margin: 0;">{{text}}</p>
							</template>
							<a-button style="padding: 0;color:#000" type="link">{{record.managerNames | filterMore(7)}}</a-button>
						</a-popover>
					</span>
					<span slot="status" slot-scope="text, record">
						<a-popconfirm :title="record.status === 1 ? '禁用状态，部门不能使用？确认禁用！':'确认启用！'" ok-text="确认" cancel-text="取消"
							@confirm="handelUserStatusChange(record)">
							<a-switch checked-children="启用" un-checked-children="禁用" :checked="record.status === 1 ? true : false"
								default-checked />
						</a-popconfirm>
					</span>
					<span slot="action" slot-scope="text, record">
						<a-button type="link" icon="form" @click="()=> $refs.createDepartment.add(record)"></a-button>
						<a-popconfirm title="删除后，不能恢复，确认删除！" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
							<a-button type="link" icon="delete"></a-button>
						</a-popconfirm>
					</span>
				</s-table>
			</a-col>
		</a-row>
		<add-department ref="createDepartment" @on-ok="departmentLoad" />
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import store from '@/store'
	import {
		getAllDepartmentData,
		getAllDepartmentTree,
		getDepartmentPage,
		delDepartment,
		enableDepartment
	} from '@/api/human/department'
	import {
		STable
	} from '@/components'
	import {
		COLUMNS_PEPARTMENT
	} from './form'
	import AddDepartment from "./add_department"
	export default {
		name: 'DepartmentList',
		components: {
			STable,
			AddDepartment
		},
		data() {
			return {
				parentOrgId: '-1',
				columns: COLUMNS_PEPARTMENT,
				loadData: parameter => {
					parameter.parentOrgId = this.parentOrgId;
					return getDepartmentPage(Object.assign(parameter)).then(res => {
						return {
							pageNo: res.data.number,
							pageSize: res.data.size,
							totalCount: res.data.total,
							totalPage: Math.ceil(res.data.total / 10),
							data: res.data.content
						}
					})
				},
			}
		},
		computed: {
			...mapGetters(['staffData', 'orgData', 'orgFields']),
		},
		beforeCreate() {
			this.events_form = this.$form.createForm(this, {
				name: 'events_form'
			})
		},
		filters: {
			filterMore(value, num) {
				if (!value) return ''
				if (value.length > num) {
					return value.slice(0, num) + '...'
				}
				return value
			}
		},
		mounted() {
			this.getAllDepartmentTree(this.parentOrgId);
			this.getOrgIdPepartmentStaff();
		},
		methods: {
			...mapActions({
				getOrgIdPepartmentStaff: 'staff/getOrgIdPepartmentStaff',
				getAllDepartmentTree: 'department/getAllDepartmentTree'
			}),
			async add(row, type) {

			},
			queryAll() {
				this.parentOrgId = '-1';
				this.getAllDepartmentTree(this.parentOrgId);
				this.$refs.table.refresh(true);
			},
			departmentLoad(state) {
				if (state) {
					this.parentOrgId = -1;
					this.getAllDepartmentTree(this.parentOrgId);
				}
				this.$refs.table.refresh(state);
			},
			orgChange(selectedKeys, label, extra) {
				if (selectedKeys.length == 0) return;
				this.parentOrgId = selectedKeys.length > 0 ? selectedKeys[0] : -1;
				this.$refs.table.refresh(true);
			},
			async handelUserStatusChange(el) {
				let params = {
					id: el.id,
					status: el.status === 1 ? 2 : 1
				}
				const {
					code
				} = await enableDepartment(params);
				if (code === '1') {
					this.$message.success('操作成功');
					this.$refs.table.refresh(false);
				}
			},
			async remove(rows) {
				const {
					code
				} = await delDepartment({
					id: rows.id
				});
				if (code === '1') {
					this.$message.success('操作成功');
					this.parentOrgId = -1;
					this.getAllDepartmentTree(this.parentOrgId);
					this.$refs.table.refresh(true);
				}
			}
		}
	}
</script>